<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line2 flex-s">
          <el-input
            placeholder="请输入内容"
            v-model="params.gongsimingcheng"
            style="width: 350px"
            size="large"
          >
            <template #append>
              <el-button
                @click="GetList"
                style="min-width: 50px"
                icon="Search"
              />
            </template>
          </el-input>
          <el-select
            width="150"
            show-border
            class="ml20"
            v-model="params.zhuyingyewu"
            size="large"
            placeholder="分类"
            clearable
            @change="GetList"
          >
            <el-option
              v-for="item in options"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="content providerTable">
        <el-table
          ref="multipleTableRef"
          border
          @selection-change="handleSelectionChange"
          :data="list"
          style="width: calc(100% - 20px)"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            property="gysNo"
            label="编号"
            width="130"
            align="center"
          />
          <el-table-column
            property="zhuyingyewu1"
            label="一级分类"
            width="85"
            align="center"
          />
          <el-table-column
            property="zhuyingyewu2"
            label="二级分类"
            width="85"
            align="center"
          />
          <el-table-column
            property="zhuyingyewu3"
            label="三级分类"
            width="85"
            align="center"
          />
          <el-table-column
            property="gongsimingcheng"
            label="公司全称"
            width="280"
            align="center"
          />
          <el-table-column
            property="zhanghao"
            label="主打产品/数量"
            width="120"
            align="center"
          />
          <el-table-column
            property="mima"
            label="业绩案例/数量"
            width="120"
            align="center"
          />
          <el-table-column
            property="yewufuzeren"
            label="业务第一负责人"
            width="130"
            align="center"
          />
          <el-table-column
            property="jishufuzerenshuliang"
            label="技术第一负责人/数量"
            width="160"
            align="center"
          />
          <el-table-column
            property="jishufuzerenshuliang"
            label="经营联系人/数量"
            width="140"
            align="center"
          />
          <el-table-column fixed="right" label="操作" width="90" align="center">
            <template #default="scope">
              <el-button
                v-if="check === '1'"
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'detail')"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="total"
          v-model:curr-page="params.current"
          :size="params.size"
          :total="total"
          @change="GetList"
        />
        <el-form-item class="note-button-group flex-s mt50">
          <el-button size="large" @click="$router.go(-1)">取消</el-button>
          <el-button
            class="ml50"
            size="large"
            type="primary"
            @click="onOperation({}, 'add')"
          >
            提交
          </el-button>
        </el-form-item>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetProvider } from "@/api/project";
import { GetDictionary } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { AddProjectSupplier } from "@/api/project";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      params: {
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
        gongsimingcheng: "",
        xmNo: route.query.xmNo || "",
        zhuyingyewu: "",
      },
      dicId: "gongyingshangpinzhuanjialeixing",
      list: [],
      options: [],
      total: 0,
      form: {
        xmNo: route.query.xmNo,
        gongyingshang: [],
      },
      check: localStorage.getItem("check"),
    });
    // 查询供应商列表
    const GetList = async () => {
      const res = await GetProvider(state.params);
      if (res.code == 4201) {
        state.list = res.data.records;
        state.total = res.data.total;
      }
    };
    // 查询供应商分类
    const GetSelect = async () => {
      const res = await GetDictionary({ dicId: state.dicId });
      if (res.code == 4201) {
        state.options = res.data;
      }
    };
    GetList();
    GetSelect();
    // 操作
    const onOperation = (params, operation) => {
      if (operation === "detail") {
        router.push({
          path: `/gongyingshang/detail`,
          query: {
            id: params.id,
          },
        });
      }
      if (operation === "add") {
        if (state.form.gongyingshang.length == 0) {
          baseMsg("请选择供应商", false);
        } else {
          AddProjectSupplier(state.form).then((res) => {
            if (res.code == 4202) {
              router.go(-1);
              baseMsg("添加成功");
            }
          });
        }
      }
    };
    // 选择参与公司
    const handleSelectionChange = (val) => {
      state.form.gongyingshang = val.map((item) => {
        return item.gysNo;
      });
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );
    return {
      ...toRefs(state),
      GetList,
      GetSelect,
      onOperation,
      handleSelectionChange,
    };
  },
});
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
  padding-bottom: 30px;
}
</style>
<style lang="scss">
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  margin-top: 40px;
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
